<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>day4 demo </title>
<style type="text/css">

	.ball{
		width: 15px;height: 15px;
		background-color: red;
		border-radius: 50%;
	}


</style>
</head>
<body>

<ol>
	<h3>Vue默认子组件不能直接用父组件的数据</h3>
	<li>经过演示：子组件无法用到父组件data总的数据，</li>
	<li>并且子组件更是无法把data的msg的数据直接加载到template模板数据之中</li>
</ol>

<ol>
	<h3>如果有需求要把父组件的数据传值到子组件，解决方法如下：</h3>
		<li>用v-bind 先绑定一个属性，然后这个属性中选中自己想要的data数据</li>
		<li>在私有组件上定义一个props数组，数组中先定义v-bind 绑定的属性</li>
		<li>而template模板使用父组件时的方法为 {{ v-bind绑定的属性名 }}</li>
		<li>知识要点：props 组件中的数据都是父组件（这里是v-bind绑定的属性名）传递给子组件的</li>
</ol>
<p style="color: red;">
	[注] props的数据是只读的，data的数据可读可写,所以修改props可能会报错
</p>
<hr><hr>



<div id="app">

	<com1 v-bind:parentmsg="msg"></com1>

</div>







<br>
<script src="vue.js"></script>

<script type="text/javascript">



var app = new Vue({
  el: '#app',

  data: {
  	msg:'这是父组件的数据'
  	
  },


  methods:{},//methods结束

	
  components:{
  	com1:{
  		template:'<h3 @click="change">这是子组件--{{parentmsg}}</h3>',
  		props:['parentmsg'],//把父组件传递过来的 parentmsg 属性 先在props 数组中定义一下，这样才能使用这个数据

  		methods:{change(){this.parentmsg = '修改之后的parent数据'}},

  	}
},






})





</script>

	
</body>
</html>